<template>
    <div class="add-form-div">
        <div class="add_div">
            <div class="form-tit">添加跟进</div>
            <Form ref="formValidate" :rules="ruleValidate" :model="formValidate">
                <Row>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>安排时间</span></Col>
                    <Col span="6">
                        <FormItem prop="sel_date">
                            <DatePicker type="date" :value="formValidate.sel_date"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>跟进人</span></Col>
                    <Col span="8">
                        <FormItem prop="folow_name">
                            <Select v-model="formValidate.folow_name">
                                <Option value="beijing">New York</Option>
                                <Option value="shanghai">London</Option>
                                <Option value="shenzhen">Sydney</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>联系人</span></Col>
                    <Col span="6">
                        <FormItem prop="liaison_name">
                            <Select v-model="formValidate.liaison_name">
                                <Option value="beijing">New York</Option>
                                <Option value="shanghai">London</Option>
                                <Option value="shenzhen">Sydney</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>联系方式</span></Col>
                    <Col span="8">
                        <FormItem prop="contact_type">
                            <Select v-model="formValidate.contact_type">
                                <Option value="电话">电话</Option>
                                <Option value="邮件">邮件</Option>
                                <Option value="会面">会面</Option>
                                <Option value="其他">其他</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>跟进阶段</span></Col>
                    <Col span="18">
                        <FormItem prop="follow_stage">
                            <Select v-model="formValidate.follow_stage">
                                <Option value="了解客户需求及开通试用">了解客户需求及开通试用</Option>
                                <Option value="发送资料">发送资料</Option>
                                <Option value="见面沟通">见面沟通</Option>
                                <Option value="确定方案、合同">确定方案、合同</Option>
                                <Option value="续约电话">续约电话</Option>
                                <Option value="培训">培训</Option>
                                <Option value="其他">其他</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="4" class="tit-label">备注</Col>
                    <Col span="18">
                        <FormItem>
                            <Input v-model="formValidate.remarks" type="textarea" :autosize="{minRows: 2,maxRows: 3}"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="4" class="tit-label">跟进状态</Col>
                    <Col span="18">
                        <FormItem>
                            <CheckboxGroup>
                                <Checkbox label="已完成"></Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem style="text-align:right;">
                    <Button>关闭</Button>
                    <Button type="primary" @click="handleSubmit('formValidate')" style="margin-left: 8px">提交</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<style>
    .add-form-div{position: absolute;top: 300px;right: 30%;background-color: #fff;border-radius: 5px;bordre:1px solid #ccc;}
    .add_div{width:558px;}
    .form-tit{border-bottom:1px solid #ccc;padding:10px;margin-bottom:10px;font-weight:900;}
    .list .add_div .tit-label{text-align: right;margin-right:10px;line-height:30px;}
</style>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    sel_date: '',
                    folow_name: '',
                    liaison_name: '',
                    contact_type: '',
                    follow_stage: '',
                    remarks: '',
                    lias_state: ''
                },
                ruleValidate: {
                    sel_date: [
                        { required: true, message: '这个是必填项', trigger: 'change'}
                    ],
                    folow_name: [
                        {required: true, message: '这个是必选项', trigger: 'change'}
                    ],
                    liaison_name: [
                        {required: true, message: '这个是必选项', trigger: 'change'}
                    ],
                    contact_type: [
                        {required: true, message: '这个是必选项', trigger: 'change'}
                    ],
                    follow_stage: [
                        {required: true, message: '这个是必选项', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                console.log(name)
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
